<template>
	<view class="detail">
		<!-- 顶部导航栏 -->
		<view class="header" v-if="data.content.length">
			<h2 class="title">{{ data.title || '文章详情' }}</h2>
		</view>

		<!-- 作者信息 -->
		<view class="author-card" v-if="Object.keys(data.user).length">
			<image class="avatar" :src="data.user.avatar || '/static/logo.png'" mode="aspectFill"
				@click="handleAvatarClick" />
			<view class="info">
				<view class="name-line">
					<text class="nickname">{{ data.user.nickname }}</text>
					<text class="badge">{{ data.user.role == 100 ? '管理员' : '普通用户'}}</text>
				</view>
				<text class="email">{{ data.user.email }}</text>
			</view>
		</view>

		<!-- 加载状态 -->
		<view v-if="loading" class="loading-wrap">
			<text>加载中...</text>
		</view>

		<!-- 正常内容 -->
		<towxml v-else :nodes="$towxmlFun(data.content, 'markdown')" />
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getDetailArticle
	} from '../../api/api'
	import {
		reactive,
		ref
	} from 'vue'

	// 响应式数据
	const data = reactive({
		content: '',
		title: '',
		user: {}
	})
	const loading = ref(true) // 加载状态

	// 返回逻辑
	const handleBack = () => {
		uni.navigateBack({
			delta: 1
		})
	}

	// 修改后的fetchData函数
	const fetchData = async (id) => {
		try {
			loading.value = true
			const res = await getDetailArticle(id)
			if (res.article) {
				// 同时获取标题和内容
				data.user = res.article.user
				data.title = res.article.title || '无标题'
				data.content = res.article.content || ''
				// 如果内容为空显示提示
				if (!data.content) showToast('内容为空')
			}
		} catch (err) {
			console.error('详情页请求失败:', err)
			data.content = ''
		} finally {
			loading.value = false
		}
	}

	// 页面加载
	onLoad((option) => {
		if (!option?.id && !option.title) {
			return
		}
		data.title = option.title
		fetchData(option.id) // 动态使用路由参数
	})
</script>

<style lang="scss" scoped>
	.detail {
		position: relative;
		padding: 20rpx 0 40rpx 0;
		box-sizing: border-box;

		.header {
			height: 88rpx;
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			background: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
			z-index: 10;

			.title {
				font-size: 34rpx;
				/* 稍微增大字号 */
				font-weight: 600;
				/* 调整字重 */
				letter-spacing: 2rpx;
				/* 增加字间距 */
				padding: 0 20rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				/* 渐变文字效果 */
				background: linear-gradient(135deg, #2da9f8 0%, #6ec4ff 100%);
				-webkit-background-clip: text;
				color: transparent;

				/* 文字阴影 */
				text-shadow: 2rpx 2rpx 4rpx rgba(45, 169, 248, 0.2);

				/* 添加装饰线 */
				&::after {
					content: '';
					position: absolute;
					bottom: 10rpx;
					left: 50%;
					transform: translateX(-50%);
					width: 80rpx;
					height: 6rpx;
					background: linear-gradient(90deg, rgba(45, 169, 248, 0) 0%, #2da9f8 50%, rgba(45, 169, 248, 0) 100%);
					border-radius: 3rpx;
				}

			}
		}

		/* 作者信息卡片样式 */
		.author-card {
			display: flex;
			align-items: center;
			padding: 24rpx 32rpx;
			margin: 120rpx 30rpx 30rpx 30rpx;
			background: #fff;
			border-radius: 16rpx;
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
			position: relative;
		}

		/* 头像样式 */
		.avatar {
			width: 88rpx;
			height: 88rpx;
			border-radius: 50%;
			margin-right: 24rpx;
			border: 2rpx solid #f0f0f0;
			background: #f8f8f8;
		}

		/* 文字信息区域 */
		.info {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		/* 昵称与权限标签 */
		.name-line {
			display: flex;
			align-items: center;
			margin-bottom: 8rpx;
		}

		.nickname {
			font-size: 32rpx;
			font-weight: 500;
			color: #333;
			margin-right: 16rpx;
			max-width: 400rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.badge {
			font-size: 20rpx;
			padding: 4rpx 12rpx;
			background: #e8f4ff;
			color: #2da9f8;
			border-radius: 24rpx;
			line-height: 1.2;
		}

		/* 邮箱样式 */
		.email {
			font-size: 24rpx;
			color: #999;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			max-width: 400rpx;
		}

		.loading-wrap,
		.empty-wrap {
			padding: 40rpx;
			text-align: center;
			color: #666;
		}
	}
</style>